<template>
  <div>
    <el-dialog title="会员设置编辑" :visible.sync="showEditPageDialog" center width="770px">
        <div class="vipdetail">
          <el-form :model="vip">
            <el-form-item :label="'封面：'" :label-width="formLabelWidth">
              <div class="upload_head_img">
                <el-upload :show-file-list="false" :before-upload="before_introduction_img_Upload_group" :http-request="upload_picture_vip_head_img" class="avatar-uploader" action="">
                  <img v-if="vip.head_img" :src="vip.head_img" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="介绍：" :label-width="formLabelWidth">
              <div class="app">
                <div class="card" ref="cutScreen">
                  <tinymce :height="300" v-model="vip.detail" id='tinymce'></tinymce>
                  <!-- <el-input v-model="vip.detail"></el-input> -->
                </div>
              </div>
              <!-- <el-button @click="jieping()">截屏</el-button> -->
              <!-- <img :src="screenUrl" width="600"/> -->
            </el-form-item>
          </el-form>
        </div>
      <el-button type="danger" style="margin-left:200px;" @click="cancel()">取消保存</el-button>
      <el-button type="primary" style="margin-left:100px;" @click="confirm()">确定保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { client } from '@/utils/alioss'
import {edit,getList,detailvip} from '@/api/thk/cms/member'
import request from '@/utils/request'
import store from '@/store'
import Tinymce from '@/components/Tinymce'
import html2canvas from 'html2canvas'
export default {
  data(){
    return{
      screenUrl:'',
      formLabelWidth:'130px',
       showEditPageDialog: false,
       saveEditDialog:false,
       affirmEditDialog:false, 
       pageData:{
         id:'',
         validity_period:'',
         price:'',
         discount_price:''
       },
       verify:{
         validity_period:'',
         price:'',
         discount_price:''
       },
       vip:{
         head_img: undefined,
         detail:undefined
       }
    }
  },
  inject: ['reload'],
  components: { Tinymce },
  methods:{
    jieping(){
      console.log(this.vip.detail);
      html2canvas(this.$refs.cutScreen, {
        allowTaint: true, //允许污染
        taintTest: true, //在渲染前测试图片(没整明白有啥用)
        useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
        background: "#fff",
        onrendered: function (canvas) {
          imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度
          imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传
        }
      })
      .then((canvas) => {
          let url = canvas.toDataURL('image/png')
          this.screenUrl=url;
          console.log(this.screenUrl);
      })
    },
    before_introduction_img_Upload_group(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return (isJPG | isPNG) && isLt2M
    },
    upload_picture_vip_head_img(file) {
      const that = this
      const fileName = 'user-admin_vip_head_img' + file.file.uid
      client().put(fileName, file.file).then((res) => {
        this.$set(that.vip, 'head_img', res.url)
        console.log(res.url);
        that.$message.success('封面地址上传成功！')
      }).catch((err) => {
        that.$message.error('封面地址上传失败，原因：' + err)
      })
    },
    handleEdit(row){
      this.showEditPageDialog = true
    },
    confirm(){
      const token=this.$store.getters.token
      detailvip(token,this.vip.head_img,this.vip.detail).then(res=>{
        this.$message({
          type:'success',
          message:res.data.msg
        })
      })
      this.saveEditDialog = !this.saveEditDialog
      this.reload()
    },
    cancel(){
      this.showEditPageDialog = false
    },
    Checkcancel(){
      this.showEditPageDialog = true
      this.saveEditDialog = false
    },
    showIntroduceDialog(row){
        console.log(row,'showEditDialog')
        this.vip.head_img= row.head_img
        this.vip.detail = row.detail
        this.showEditPageDialog = !this.showEditPageDialog
    }
  }
}
</script>
<style>
.viptime{
  font-size: 20px;
  margin-bottom: 30px;
}
.vippdetail{
  margin-bottom: 30px;
}
.vipcheap{
  font-size: 20px;
  margin-bottom: 30px;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /* .card {
      width: 354px;
    }

    .card img.cover {
      width: 100%;
    }

    .card .user-name {
      text-align: center;
    } */
</style>